<template>
  <div class="map" @click="handleClick">
    <el-col :span="14">
      <div class="map-content">
        <div id="chartMap" :style="{ width: '100%', height: '100%' }"></div>
      </div>
    </el-col>
    <el-col :span="10">
      <el-form>
        <el-form-item>
          <el-date-picker v-model="data" type="month" placeholder="选择月">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <br />
    </el-col>
  </div>
</template>

<script>
export default {
  props: {
    mapData: {
      type: Object,
      default: () => {}
    },

    title: {
      type: String,
      default: '数据表'
    }
  },

  watch: {
    mapData() {
      this.drawLine()
    }
  },

  computed: {
    chartOption() {
      return {
        title: {
          text: `风险地图-${this.title}`,
          left: 'center'
        },
        color: ['red', 'blue'],
        legend: {
          bottom: 10,
          data: ['风险区域', '欠费区域']
        },
        tooltip: {
          trigger: 'item'
        },
        visualMap: {
          min: 0,
          max: 10000,
          show: false,
          inRange: {
            color: ['blue', 'orangered']
          }
        },
        series: [
          {
            name: '风险区域',
            type: 'map',
            mapType: 'china', // 自定义扩展图表类型
            label: {
              show: true
            },
            data: this.mapData.dataA
          },
          {
            name: '欠费区域',
            type: 'map',
            mapType: 'china', // 自定义扩展图表类型
            label: {
              show: true
            },
            data: this.mapData.dataB
          }
        ]
      }
    }
  },

  data() {
    return {
      data: '',
      tagStyle: '',
      tagStatus: false
    }
  },

  mounted() {
    this.drawLine()
  },

  methods: {
    drawLine() {
      let _this = this
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('chartMap'))
      // 绘制图表
      myChart.setOption(this.chartOption)

      myChart.on('click', function(params) {
        _this.tagStatus = true
        let clickPosition = params.event
        let x = clickPosition.offsetX
        let y = clickPosition.offsetY
        _this.tagStyle = `top:${y - 100}px;left:${x - 20}px`
      })

      myChart.getZr().on('click', function() {
        _this.tagStatus = false
      })
    },

    handleClick(e) {
      if (e.target.tagName !== 'CANVAS') this.tagStatus = false
    }
  }
}
</script>

<style lang="scss" scoped>
.map {
  .map-content {
    width: 800px;
    height: 600px;
    position: relative;
    margin-bottom: 50px;
    .tag {
      line-height: 1.5;
      position: absolute;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      div {
        cursor: pointer;
      }
    }
  }
  .tip {
    display: flex;
    align-items: center;
    justify-content: center;
    .radio {
      width: 10px;
      height: 10px;
      border-radius: 100px;
      background-color: red;
    }
    span {
      font-weight: 600;
      color: red;
      margin-left: 10px;
    }
  }
}
</style>
